@bg: #ddd;
@border: #e3e3e3;
@link: #2E2B2B;

.rounded-corners (@radius: 5px) {
    -moz-border-radius: @radius;
    -webkit-border-radius: @radius;
    border-radius: @radius;
}

.rounded-corners-specific (@top-left, @top-right, @bottom-right, @bottom-left) {
    -moz-border-radius: @top-left @top-right @bottom-right @bottom-left;
    -webkit-border-radius: @top-left @top-right @bottom-right @bottom-left;
    border-radius: @top-left @top-right @bottom-right @bottom-left;
}

.gradient (@color1, @color2) {
    background: @color1; /* Old browsers */
    background: -moz-linear-gradient(top, @color1 0%, @color2 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,@color1), color-stop(100%,@color2)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, @color1 0%,@color2 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, @color1 0%,@color2 100%); /* Opera11.10+ */
    background: -ms-linear-gradient(top, @color1 0%,@color2 100%); /* IE10+ */
    //filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=' @color1 ', endColorstr=' @color2 ',GradientType=0 ); /* IE6-9 */
    background: linear-gradient(top, @color1 0%,@color2 100%); /* W3C */
}

.box-shadow (@x: 0px, @y: 1px, @blur: 0px, @color) {
    -moz-box-shadow: @x @y @blur @color;
    -webkit-box-shadow: @x @y @blur @color;
    box-shadow: @x @y @blur @color;
}

BODY {
    background: #fff;
    color: #767373;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    line-height: 1.7em;
}

H1, H2, H3 {
    font-family: Georgia, 'Times New Roman', times, serif;
    margin-bottom: 5px;
}

H2 {
    font-size: 18px;
    font-weight: normal;
}

A {
    color: @link;
    text-decoration: none;
    &:hover {
	color: darken(@link, 20%);
	text-decoration: underline;
    }
}

#header {
    height: 120px;
    .page-title {
	font: normal bold 48px Arial;
	margin-top: 40px;
    }
}

#navigation {
    @color1: #ee6e49;
    @color2: #cf2f21;
    border: @color2;
    height: 40px;
    margin-bottom: 20px;
    .rounded-corners-specific (5px, 5px, 0, 0);
    .gradient (@color1, @color2);
    ul.menu {
	margin-top: 10px;
	font-weight: bold;
	font-family: Arial;
	text-transform: uppercase;
	list-style: none;
	li.menu-item {
	    float: left;
	    a {
		color: #fff;
		padding: 10px;
		&:hover {
		    background-color: #fff;
		    border: darken(#000, 50%);
		    color: #000;
		    padding: 10px;
		    text-decoration: none;
		    .rounded-corners;
		}
	    }
	}
    }
}

#content {
    
}

#sidebar {
    .inner-wrapper {
	border-left: 1px solid @border;
	height: 100%;
	padding: 0 20px;
    }
}

#footer {
    background-color: @bg;
    height: 40px;
    margin: 20px 0;
}

.article, .article-full {
    IMG {
	border: 1px solid #E7E4E2;
	float: left;
	margin-right: 10px;
    }
    .info {
	color: #B79C92;
	.created {
	    font-weight: bold;
	}
	.delimiter {
	    color: #ddd;
	}
    }
}

.article-full {
    H1 {
	color: @link;
	font-family: Arial, Helvetica, sans-serif;
    }
    .info {
	margin-bottom: 20px;
	SPAN {
	    margin-right: 10px;
	}
    }
}